<!DOCTYPE html>
<html>
  <head>
    <!-- 

      css mask : https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
      用作元素蒙版层的图像
     -->
    <style>
      #vi {
        width: 668px;
        height: 376px;
        -webkit-mask-image: url(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/161ced10bf344eb085c34cefd8958dd1~tplv-k3u1fbpfcp-watermark.image?);
        /* -webkit-mask-image: linear-gradient(to right, transparent 8%, #fff 30%); */
        -webkit-mask-size: 668px 376px;
        position: relative;
      }
      .bullet {
        position: absolute;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="vi">
      <div class="bullet" style="left: 100px; top: 0">元芳，你怎么看</div>
      <div class="bullet" style="left: 200px; top: 20px">
        你难道就是传说中的奶灵
      </div>
      <div class="bullet" style="left: 300px; top: 40px">你好，我是胖灵</div>
      <div class="bullet" style="left: 400px; top: 60px">
        这是第一集，还没有舔灵
      </div>
    </div>
  </body>
</html>
